<template>
  <div class="uni-tabs-content-croll">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'" class="uni-scroll">
      <el-divider content-position="left">短信网关</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('oss.type')" size="mini" prop="sms.type">
            <el-radio-group v-model="dataForm.sms.type">
              <el-radio :label="1">阿里云</el-radio>
              <el-radio :label="2">腾讯云</el-radio>
              <el-radio :label="3">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="dataForm.sms.type=='1'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="sms.aliyunAccessKeyId" :label="$t('sms.aliyunAccessKeyId')">
              <el-input v-model="dataForm.sms.aliyunAccessKeyId" :placeholder="$t('sms.aliyunAccessKeyIdTips')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sms.aliyunAccessKeySecret" :label="$t('sms.aliyunAccessKeySecret')">
              <el-input v-model="dataForm.sms.aliyunAccessKeySecret" :placeholder="$t('sms.aliyunAccessKeySecretTips')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="dataForm.sms.type=='2'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="sms.qcloudAppId" :label="$t('sms.qcloudAppId')">
              <el-input v-model="dataForm.sms.qcloudAppId" :placeholder="$t('sms.qcloudAppIdTips')" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sms.qcloudAppKey" :label="$t('sms.qcloudAppKey')">
              <el-input v-model="dataForm.sms.qcloudAppKey" :placeholder="$t('sms.qcloudAppKeyTips')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="dataForm.sms.type=='3'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('msgChannel.channelService')" prop="sms.customChannelService">
              <!--文本框-->
              <el-input v-model="dataForm.sms.customChannelService" :placeholder="$t('msgChannel.channelService')" clearable>
              </el-input>
              <br />
              <span class="form-item-explain">自定义短信网关bean名称</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('common.remark')" prop="sms.remark">
              <el-input v-model="dataForm.sms.remark" :placeholder="$t('common.remark')" clearable></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$t('msgChannel.configParam')" prop="sms.customConfigParam">
              <!--文本框-->
              <el-input v-model="dataForm.sms.customConfigParam" :placeholder="$t('msgChannel.configParam')" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
            <!-- <br /> -->
            <!-- <span class="form-item-explain">开启后将字典数据进行缓存</span> -->
          </el-col>
        </el-row>
      </template>
      <el-divider content-position="left">邮件网关</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('oss.type')" size="mini" prop="mail.type">
            <el-radio-group v-model="dataForm.mail.type">
              <el-radio :label="1">标准邮件</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="dataForm.mail.type=='1'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="mail.smtp" :label="$t('mail.config')">
              <el-input v-model="dataForm.mail.smtp" :placeholder="$t('mail.config')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="mail.port" :label="$t('mail.port')">
              <el-input v-model="dataForm.mail.port" :placeholder="$t('mail.port')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="mail.username" :label="$t('mail.username')">
              <el-input v-model="dataForm.mail.username" :placeholder="$t('mail.username')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="mail.password" :label="$t('mail.password')">
              <el-input v-model="dataForm.mail.password" :placeholder="$t('mail.password')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="mail.ssl" :label="$t('mail.ssl')">
              <el-input v-model="dataForm.mail.ssl" :placeholder="$t('mail.sslPlaceholder')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="dataForm.mail.type=='2'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('msgChannel.channelService')" prop="mail.customChannelService">
              <!--文本框-->
              <el-input v-model="dataForm.mail.channelService" :placeholder="$t('msgChannel.channelService')" clearable>
              </el-input>
              <br />
              <span class="form-item-explain">自定义短信网关bean名称</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('common.remark')" prop="mail.remark">
              <el-input v-model="dataForm.mail.remark" :placeholder="$t('common.remark')" clearable></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$t('msgChannel.configParam')" prop="mail.customConfigParam">
              <el-input v-model="dataForm.mail.customConfigParam" :placeholder="$t('msgChannel.configParam')" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!-- <el-divider content-position="left">其他</el-divider>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="消息签名" prop="signatureText">
      <el-input v-model="dataForm.signatureText" placeholder="消息签名" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </el-form-item>
      </el-col>
      </el-row> -->
    </el-form>
    <!-- <el-col :span="24" style="text-align:center;margin-top: 30px;">
      <el-button size="small" type="primary" @click="dataFormSubmitHandle()">{{ $t('save') }}</el-button>
    </el-col> -->
    <div class="uni-tab-form-bottom">
      <el-button size="small" type="primary" @click="dataFormSubmitHandle()">{{ $t('save') }}</el-button>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
// import mainContent from '@/views/main-content'
// var content = mainContent
export default {
  data () {
    return {
      timestamp: this.$route.params.timestamp,
      loading: false,
      dataForm: {
        sms: {
          type: 1,
          aliyunAccessKeyId: '',
          aliyunAccessKeySecret: '',
          aliyunSignName: '',
          aliyunTemplateCode: '',
          qcloudAppId: null,
          qcloudAppKey: '',
          qcloudSignName: '',
          qcloudTemplateId: '',
          customChannelService: '',
          customConfigParam: ''
          // remark: ''
        },
        mail: {
          type: 1,
          smtp: '',
          port: '',
          username: '',
          password: '',
          ssl: '',
          customChannelService: '',
          customConfigParam: '',
          remark: ''
        },
        signatureText: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        'sms.type': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.aliyunAccessKeyId': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.aliyunAccessKeySecret': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.aliyunSignName': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.aliyunTemplateCode': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.qcloudAppId': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.qcloudAppKey': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.qcloudSignName': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.qcloudTemplateId': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'sms.customChannelService': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.type': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.smtp': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.port': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.username': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.password': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        'mail.customChannelService': [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        signatureText: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.getInfo()
      })
    },
    // 获取信息
    getInfo () {
      this.loading = true
      this.$http.get(`/sys/appConfig/msg`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http['post']('/sys/appConfig/msg', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
            }
          })
        }).catch(() => { })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
</style>
